 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div id="app">
        <div>{{friends.name}}</div>
        <button v-on:click="changeMessage">改变</button>
    </div>
    <script src="../lib/Vue.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
               return {
                  message:"我是谁？",
                  friends:{
                    name:"curry"
                  }
               }
            },
            methods: {
                changeMessage:function(friend)
                {
                    this.friends.name = "cq"; 
                }
            },

            //监听器
            watch:{
                 
                 //默认不支持深度监听
                 //变成对象,开启深度监听
                friends:
                {
                    handler(newVal,oldVal)
                    {
                       console.log(newVal,oldVal);
                    },
                    //开启深度监听
                    deep:true,
                    //开启立即执行
                    immediate:true
                },

                //普通的监听：监听对象里面的属性时才会写成字符串的方式
                "friends.name"(newVal,oldVal)
                {
                   console.log(newVal,oldVal);
                }

            }
        });
        app.mount("#app");
    </script>
</body>

</html>